<template>
  <div class="shop-details">
    <a-row>
      <a-col :span="5">
        <avatar-card :encryptConfirmed="false" :src="details.first_picture" defaultImgType="other" />
      </a-col>
      <a-col :span="19">
        <descriptions-group :data-source="details" :col-span="24" :columns="descriptionsList.slice(0, 4)" />
      </a-col>
    </a-row>
    <descriptions-group
      :data-source="details"
      :col-span="24"
      :columns="descriptionsList.slice(-1)"
      style="margin-top: 15px"
    />
  </div>
</template>

<script>
import AvatarCard from '@gis/lib/components/img-viewer/avatar-card.vue';
import DescriptionsGroup from '@gis/lib/components/descriptions/index.vue';
import { unitDetail } from '@gis/lib/api';

export default {
  name: 'JQShopDetails',
  components: { AvatarCard, DescriptionsGroup },
  props: {
    subject_id: { type: String, default: '' },
  },
  data() {
    return {
      details: {},
      descriptionsList: [
        { label: '商家名称', key: 'name' },
        {
          label: '商家类型',
          key: 'around_p_type_name',
          format: () => `${this.details.around_p_type_name} - ${this.details.around_c_type_name}`,
        },
        { label: '联系人', key: 'person' },
        { label: '联系电话', key: 'phone' },
        { label: '地址', key: 'business_address' },
        // { label: '坐标', key: 'longitude', format: () => `${this.details.longitude} , ${this.details.latitude}` },
      ],
    };
  },
  created() {
    this.getUnitDetails();
  },
  methods: {
    async getUnitDetails() {
      const { data = {} } = await unitDetail({ id: this.subject_id });
      this.details = Object.assign({}, data);
    },
  },
};
</script>

<style scoped lang="less">
.shop-details {
  padding: 20px;
}
</style>
